import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {OpCircleManager} from "@/services/api-functions";
import {isSuccess} from "@/utils/utils";
import {Avatar, Card, Descriptions, List} from "antd";


const CircleCommentDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [circlePost, setCirclePost] = useState<any>(undefined)

  const queryCirclePostDetail = (selectId: number) => {
    if (selectId) {
      OpCircleManager.dynamicDetail(selectId).then(({code, data}) => {
        if (isSuccess(code)) {
          setCirclePost(data)
        }
      })
    }
  }

  useEffect(() => queryCirclePostDetail(id), [id])

  return (
    <PageContainer>
      <Card bordered={false}>
        <Descriptions title="动态详情" style={{marginBottom: 32}}>
          <Descriptions.Item label="动态ID">{id}</Descriptions.Item>
          <Descriptions.Item label="所属圈子">{circlePost?.circleName}</Descriptions.Item>
          <Descriptions.Item label="发布用户">{circlePost?.userDto?.nickName}</Descriptions.Item>
          <Descriptions.Item label="标签">
            {circlePost?.labelDtoList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)}
          </Descriptions.Item>
          <Descriptions.Item label="是否精选">{circlePost?.essence ? '是' : '否'}</Descriptions.Item>
          <Descriptions.Item label="是否置顶">{circlePost?.headFixed ? '是' : '否'}</Descriptions.Item>
          <Descriptions.Item label="是否同步到首页">{circlePost?.homePage ? '是' : '否'}</Descriptions.Item>
          <Descriptions.Item label="编辑时间">{circlePost?.gmtModified}</Descriptions.Item>
          <Descriptions.Item label="发布时间">{circlePost?.gmtCreate}</Descriptions.Item>
        </Descriptions>
        <Descriptions title="数据统计" style={{marginBottom: 32}}>
          <Descriptions.Item label="浏览量">{circlePost?.browseNum ?? 0}</Descriptions.Item>
          <Descriptions.Item label="点赞数">{circlePost?.greatNum ?? 0}</Descriptions.Item>
          <Descriptions.Item label="收藏数">{circlePost?.focusNum ?? 0}</Descriptions.Item>
          <Descriptions.Item label="评论数">{circlePost?.replyNum ?? 0}</Descriptions.Item>
          <Descriptions.Item label="分享数">{circlePost?.shareNum ?? 0}</Descriptions.Item>
        </Descriptions>
        <Descriptions title="详细内容" style={{marginBottom: 32}} column={1}>
          <Descriptions.Item label="内容">{circlePost?.content ?? ''}</Descriptions.Item>
          <Descriptions.Item label="附件" style={{width: '100%'}}>
            <List
              style={{width: '100%'}}
              itemLayout="horizontal"
              dataSource={circlePost?.files ?? []}
              renderItem={({name, url}: any) => <List.Item>
                <List.Item.Meta title={name}
                  description={<a href={url} target='_blank' rel="noreferrer">下载</a>}
                />
              </List.Item>}
            />
          </Descriptions.Item>
          <Descriptions.Item label="图片">
            <List
              style={{width: '100%'}}
              itemLayout="horizontal"
              dataSource={circlePost?.images ?? []}
              renderItem={({name, url}: any) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={url}/>}
                  title={name}
                  description={<a href={url} target='_blank' rel="noreferrer">下载</a>}
                />
              </List.Item>}
            />
          </Descriptions.Item>
        </Descriptions>
      </Card>
    </PageContainer>
  );
};

export default CircleCommentDetail;
